<template>
  <div class="app-container" v-loading="loading">
    <!-- 催单详情 -->
    <!-- <shortcutButton v-model="form" :type="$route.query.type" /> -->
    <el-row :gutter="10">
      <el-col :span="19">
        <customerInformation v-model="customerList" :type="$route.query.type" />
        <collectionResult v-model="form" />
        <otherCollectionDetail v-model="form" />
      </el-col>
      <el-col :span="5" style="margin-top: 10px">
        <OperationRecordCop :logs="logs" />
      </el-col>
    </el-row>
    <div style="text-align: right; box-sizing: border-box; padding-right: 20px; margin-top: 20px; background-color: #fff; width: 100%; height: 60px; line-height: 60px; border-radius: 8px">
      <el-button @click="cancel">取消</el-button>
      <el-button @click="sure" type="primary">确定</el-button>
    </div>
  </div>
</template>

<script>
import customerInformation from '../components/customerInformation'
import collectionResult from '../components/collectionResult'
import otherCollectionDetail from '../components/otherCollectionDetail'
import shortcutButton from '../components/shortcutButton'
import OperationRecordCop from '@/views/contractTemplate/components/OperationRecordCop.vue'
import { getCollectionManageDetail, getCollectionWarningDetail } from '@/api/collectionModule'
export default {
  // 发起催单
  name: 'InitiateACollectionDetail',
  components: {
    customerInformation,
    collectionResult,
    otherCollectionDetail,
    shortcutButton,
    OperationRecordCop,
  },
  data() {
    return {
      loading: false,
      form: {},
      customerList: [],
      logs: [],
    }
  },
  watch: {
    // '$route.query.beFrom': {
    //   handler(val) {
    //     if (val == 'CollectionWarning') {
    //       this.getCollectionWarningDetail()
    //     } else if (val == 'CollectionManage') {
    //       this.getCollectionManageDetail()
    //     }
    //   },
    //   deep: true,
    //   immediate: true,
    // },
  },
  created() {
    if (this.$route.query.beFrom == 'CollectionWarning') {
      this.getCollectionWarningDetail()
    } else if (this.$route.query.beFrom == 'CollectionManage') {
      this.getCollectionManageDetail()
    }
  },
  computed: {
    // 发起催单
    initiateACollectionDetail() {
      return this.$route.query.beFrom == 'initiateACollectionDetail'
    },
  },
  methods: {
    // 催收管理详情
    async getCollectionManageDetail() {
      this.loading = true
      try {
        let res = await getCollectionManageDetail(this.$route.query.id)
        this.form = res.data
        this.logs = res.data.logs
        this.customerList = [
          {
            customer: res.data.customer,
            overdueInformation: res.data.overdueInformation,
            totalOfReceivableAmount: res.data.totalOfReceivableAmount,
            totalOfWaitAmount: res.data.totalOfWaitAmount,
            totalOfReceivedAmount: res.data.totalOfReceivedAmount,
            totalWriteOffAmount: res.data.totalWriteOffAmount,
            totalOfThisMonth: res.data.totalOfThisMonth,
            totalOfToDay: res.data.totalOfToDay,
            collectionProgress: res.data.collectionProgress,
            code: res.data.code,
            totalOfCanWritableAmount: res.data.totalOfCanWritableAmount,
          },
        ]
        this.loading = false
      } catch (error) {
        this.loading = false
      }
    },
    // 催收预警详情
    async getCollectionWarningDetail() {
      this.loading = true
      try {
        let res = await getCollectionWarningDetail(this.$route.query.id)
        this.form = res.data
        this.logs = res.data.logs
        this.customerList = [
          {
            customer: res.data.customer,
            overdueInformation: res.data.overdueInformation,
            totalOfReceivableAmount: res.data.totalOfReceivableAmount,
            totalOfWaitAmount: res.data.totalOfWaitAmount,
            totalOfReceivedAmount: res.data.totalOfReceivedAmount,
            totalWriteOffAmount: res.data.totalWriteOffAmount,
            totalOfThisMonth: res.data.totalOfThisMonth,
            totalOfToDay: res.data.totalOfToDay,
            collectionProgress: res.data.collectionProgress,
            totalOfCanWritableAmount: res.data.totalOfCanWritableAmount,
          },
        ]
        this.loading = false
      } catch (error) {
        this.loading = false
      }
    },
    cancel() {
      this.$tab.closeOpenPage(this.$route)
      this._toPage({
        name: this.$route.query.beFrom,
      })
    },
    sure() {
      this.$tab.closeOpenPage(this.$route)
      this._toPage({
        name: this.$route.query.beFrom,
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.app-container {
  overflow: auto !important;
}
</style>
